<template>
</template>

<script>
</script>

<style>
</style>
<template>
  <div class="maincss">
    <div>
      <div class="teacherbox" v-for="teacher in data.teachers">
        <div class="teachercontent" @click="toteacher(teacher.id)">
          <span class="teacherimgbox">
            <img :src="teacher.avatar" class="teacherimgx"/>
          </span>
          <div>
            <span class="teachern">{{teacher.name}}</span>
          </div>
          <div>
            <span class="teacherschool">清华大学</span>
            <span class="teachercla">{{teacher.career}}</span>
          </div>
        </div>
      </div>
    </div>
      <div class="pager-box">
        <el-pagination
          class="page"
          background
          layout="total,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :page-size="10"
          :current-page="data.current"
          @current-change="handleCurrentChange"
          :total="data.total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import teacher from '@/api/edu/teacher/teacher'
export default{
  methods:{
    handleCurrentChange(page){
      teacher.getteacherPG(page,10).then(response =>{
        this.data=response.data.data.teachermap
      })
    },
    toteacher(id){
     let newtarg=this.$router.resolve({
       path: '/teacher/'+id,
     })
     window.open(newtarg.href, '_blank');
    }
  },
  asyncData({params,error}){
    return teacher.getteacherPG(1,10).then(response => {
      console.log('测试初始数据：',response.data.data)
      return {data: response.data.data.teachermap}
    })
  }
}
</script>

<style>
  /* 主页面背景色 */
  .maincss{

  }
  /* 讲师名称  讲师级别 讲师出身 */
  .teachern{
    color: #FFFFFF;
    font-weight: bold;
    font-family: "felix titling";
    font-style: inherit;
  }
  .teachercla{
    font-weight: 200;
    background-color: darkgoldenrod;
  }
  .teacherimglist{

  }
  .teacherbox{
    text-align: center;
  }
  .teacherimgx{
     border-radius: 100%;
     height: 17.25rem;
     width: 17.25rem;
     margin-top: 1.25rem;
     transform-style: preserve-3d;
     transition: all 1.5s;
  }
  /* 讲师头像反转 */
  .teacherimgx:hover{
    height: 17.25rem;
    width: 17.25rem;
    transform: rotateY(360deg);
      -webkit-transform: rotateY(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
      -ms-transform: rotateY(360deg);
  }

  .teachercontent{
    border-radius: 0.5rem;
    margin-top: 3%;
    margin-left:3%;
    width: 94%;
    height: 94%;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  }
  .teacherbox{
    width: 20%;
    height: 24.5rem;
    display: inline-table;
  }
  .page{
   text-align: center;
   margin-top: 1.25rem;
  }
 /*带背景的分页按钮背景色begin*/
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #08C0B9;
   color: #FFF;
 }
 .el-pagination.is-background .el-pager li.active {
   color: #fff;
   cursor: default;
 }
 .el-pagination.is-background .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
   background-color: #08C0B9;
   color: #FFF;
 }
 /*带背景的分页按钮背景色end*/


 /*不带背景的分页按钮背景色begin*/
 .el-pager li.active {
   color: #08C0B9;
   cursor: default;
 }
 .el-pagination .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }

</style>